<!-- 立即购买 -->
<template>
  <div>
    <van-nav-bar
      title="立即购买"
      left-text="回到首页"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-grid direction="horizontal" :column-num="1">
      <div v-if="info">
        <van-grid-item class="fuxiang">
          <van-image :src="arr.img" />
          <span>
            <span class="lianghang">{{ arr.name }}</span>
            <span style="color: red" class="left1">￥{{ arr.price }}</span>
            <span style="color: gray" class="right1">{{ arr.ss }}</span>
          </span>
        </van-grid-item>
      </div>
      <!-- <van-grid-item class="fuxiang" v-else>
        <van-image :src="$store.state.xiangqing.img" />
        <span>
          <span class="lianghang">{{ $store.state.xiangqing.name }}</span>
          <span style="color: red" class="left1"
            >￥{{ $store.state.xiangqing.price }}</span
          >
        </span>
      </van-grid-item> -->
    </van-grid>

    <!-- <van-grid direction="horizontal" :column-num="1">
      <div v-if="info">
        <van-grid-item
          v-for="(item, index) in $route.query.arrs"
          :key="index"
          class="fuxiang"
        >
          <van-image :src="item.img" />
          <span>
            <span class="lianghang">数量：{{ item.name }}</span>
            <span style="color: red" class="left1">￥{{ item.price }}</span>
            <span style="color: gray" class="right1">{{ item.ss }}</span>
          </span>
        </van-grid-item>
      </div>
      <van-grid-item class="fuxiang" v-else>
        <van-image :src="$store.state.xiangqing.img" />
        <span>
          <span class="lianghang">{{ $store.state.xiangqing.name }}</span>
          <span style="color: red" class="left1"
            >￥{{ $store.state.xiangqing.price }}</span
          >
        </span>
      </van-grid-item>
    </van-grid> -->
    <van-radio-group v-model="radio">
      <van-cell title="支付宝支付" label="数亿用户都在用，安全可托付">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #icon>
          <img
            src="http://imooc.hybrid.lgdsunday.club/img/alipay.608c5312.svg"
          />
        </template>
        <template #extra>
          <van-radio name="1"></van-radio>
        </template>
      </van-cell>

      <van-cell title="微信支付" label="数亿用户都在用，安全可托付">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #icon>
          <img
            src="http://imooc.hybrid.lgdsunday.club/img/weichat.0980c80b.png"
          />
        </template>
        <template #extra>
          <van-radio name="2"></van-radio>
        </template>
      </van-cell>
    </van-radio-group>

    <van-button
      class="buynow"
      icon-position="right"
      size="large"
      color="linear-gradient(to right, #ff6034, #ee0a24)"
      @click="ljgm"
    >
      立即购买
    </van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: this.$route.query.arr,
      info: true,
      radio: "1",
    };
  },
  created() {
    console.log(this.arr);
  },
  methods: {
    // 回到首页
    onClickLeft() {
      this.$router.push("/home");
    },
    // 点击提示
    ljgm() {
      if (this.radio == 1) {
        this.$dialog.alert({
          message: `支付宝支付${this.arr.price}元`,
        });
      } else {
        this.$dialog.alert({
          message: `微信支付${this.arr.price}元`,
        });
      }
    },
  },
};
</script>

<style scoped>
.lianghang {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;
  overflow-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  overflow: hidden;
  font-size: 20px;
}
.right1 {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.left1 {
  position: absolute;
  /* margin-right: 100px; */
  /* bottom: 18px; */
  font-size: 20px;
}
.fuxiang {
  position: relative;
  width: 100%;
  height: 300px;
}
.right2 {
  position: absolute;
  right: 23px;
}
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
img {
  width: 15%;
  height: 15%;
}
.buynow {
  position: fixed;
  bottom: 100px;
  border-radius: 50px;
  width: 90%;
  margin-left: 5%;
  height: 1.2rem;
}
</style>
